<template>
  <div>
    <h1>介绍与安装</h1>
    <el-card header="介绍">
      <div class="introduce">
        <div>
          基于 Vue2 +
          <ELink />+
          <VLink />开发的可视化表单编辑器插件，功能包括：表单的设计、填报及已填报表单的显示，适用于各种动态表单项目；生成表单预览样式支持PC端（
          <ELink />）及移动端（
          <VLink />）两种形式。
        </div>
        <div>该插件包含五个组件，分为两个阶段：</div>
        <el-tree class="introduce-item" :data="data" default-expand-all>
          <span slot-scope="{ node, data }">
            <el-link
              :type="data.type"
              :href="data.link"
              :icon="data.icon"
              :underline="false"
            >{{ data.label }}</el-link>
          </span>
        </el-tree>
      </div>
    </el-card>
    <!-- <el-card header>
      <div class="introduce">
        gitee地址：
        <el-link
          target="_blank"
          href="https://gitee.com/deer_bambi_hly/form-generator"
          type="primary"
          :underline="false"
        >https://gitee.com/deer_bambi_hly/form-generator</el-link>
      </div>
      <div class="introduce">
        npm地址：
        <el-link
          target="_blank"
          href="https://www.npmjs.com/package/@huliuyu/form-generator?activeTab=readme"
          type="primary"
          :underline="false"
        >https://www.npmjs.com/package/@huliuyu/form-generator?activeTab=readme</el-link>
      </div>
    </el-card>-->
    <el-card header="npm 安装">
      <Code code="npm install @huliuyu/form-generator" />
    </el-card>
    <el-card header="引入">
      <div class="introduce">在 main.js 中写入以下内容：</div>
      <Code
        :code="`import FG from '@huliuyu/form-generator'
import '@huliuyu/form-generator/form-generator.css'
Vue.use(FG)`"
      />
    </el-card>
  </div>
</template>

<script>
import Code from "@/views/coms/components/Code";
import ELink from "@/views/coms/components/ELink";
import VLink from "@/views/coms/components/VLink";

export default {
  components: {
    Code,
    ELink,
    VLink
  },
  data() {
    return {
      data: [
        {
          label: "设计阶段",
          icon: "el-icon-price-tag",
          children: [
            {
              label:
                "表单设计：可以通过拖拽的方式，将单个的组件组合成一个完整的表单，生成JSON数据",
              children: [
                {
                  label: "FGDesigner",
                  icon: "el-icon-link",
                  link: "#/comsDesiger",
                  type: "primary"
                }
              ]
            }
          ]
        },
        {
          label: "用户阶段",
          icon: "el-icon-price-tag",
          children: [
            {
              label:
                "表单填报：传入从表单设计组件得到的JSON表单数据，可以实现表单的显示及填报",
              children: [
                {
                  label: "FGPcForm",
                  icon: "el-icon-link",
                  link: "#/comsFormPc",
                  type: "primary"
                },
                {
                  label: "FGPhoneForm",
                  icon: "el-icon-link",
                  link: "#/comsFormPhone",
                  type: "primary"
                }
              ]
            },
            {
              label: "详情显示：完成表单填报后的表单详情数据的显示",
              children: [
                {
                  label: "FGPcShow",
                  icon: "el-icon-link",
                  link: "#/comsShowPc",
                  type: "primary"
                },
                {
                  label: "FGPhoneShow",
                  icon: "el-icon-link",
                  link: "#/comsShowPhone",
                  type: "primary"
                }
              ]
            }
          ]
        }
      ]
    };
  }
};
</script>

<style lang='scss' scope>
</style>
